﻿<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
	<%
		String path=request.getContextPath();
		System.out.println(path);
		String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
	%>
		<link href="<%=basePath%>/css/bootstrap.min.css" rel="stylesheet">
		<script type="text/javascript" src="<%=basePath%>/js/jquery.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>/js/bootstrap.min.js"></script>
		
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/login.css">
<script type="text/javascript">
	$(function(){
		$("#username").change(function(){
			// if(this.value()==null||this.value().trim().length==0)
			// {
			// 	return;
			// }
			//1.写法1
			// $.post("/user/checkExistsUserName",
			// 		{
			// 			"username": $("#username").val(),
			// 		},
			// 		function(response){
			// 			if(response.errorCode === "100") {
			// 				$("#usernameMsg").html(response.objectMap.msg).css("color","green");
			// 				$("#registerBtn").attr("disabled");
			// 			}else{
			// 				$("#usernameMsg").html(response.objectMap.msg).css("color","red");
			// 				$("#registerBtn").attr("disabled",true);
			// 			}
			// });
			//写法2：发送Ajax请求
			$.ajax({
				url: "<%=path%>/xiaomi/user/checkExistsUserName",
				type:"POST",
				data: {
					"username": $("#username").val(),
				},
				success: function(response) {
					if(response.errorCode === "100") {
						$("#usernameMsg").html(response.objectMap.msg).css("color","green");
						$("#registerBtn").removeAttr("disabled");
					}else{
						$("#usernameMsg").html(response.objectMap.msg).css("color","red");
						$("#registerBtn").attr("disabled",true);
					}
				},
				error: function() {
					$("#errorMsg").text("请求迷路了，小二正在赶来的路上，请稍后再试..").css({"color": "red"});
				}
			});
	});

		// // 点击注册按钮时，发送请求
		// $("#register-btn").click(function() {
		// 	// 发送Ajax请求
		// 	$.ajax({
		// 		url: "/MYYPFruitShop/consumer/register",
		// 		method: "POST",
		// 		data: {
		// 			"username": $("#username").val(),
		// 			"password": $("#password").val()
		// 		},
		// 		success: function(response) {
		// 			if(response.errorCode === "100") {
		// 				alert("Congratulations，账号注册成功，请登录吧");
		// 				window.location = "login.jsp";
		// 			}else{
		// 				$("#errorMsg").text(response.objectMap.msg).css({"color": "red"});
		// 			}
		// 		},
		// 		error: function() {
		// 			$("#errorMsg").text("请求迷路了，小二正在赶来的路上，请稍后再试..").css({"color": "red"});
		// 		}
		// 	});
		// });
	})
</script>
<title>注册</title>
</head>
<body>
	<div class="regist">
		<div class="regist_center">
			<div class="regist_top">
				<div class="left fl"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;会员注册</div>
				<div class="right fr">
					<a href="index.jsp" target="_black">小米商城</a>
				</div>
				<div class="clear"></div>
				<div class="xian center"></div>
			</div>
			<div class="center-block" style="margin-top: 80px;">
				<form id="form1" class="form-horizontal" action="<%=path%>/xiaomi/user/register" method="post">

					<div class="form-group">
						<label class="col-sm-2 control-label">用户名</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="text" id="username" name="username" class="form-control col-sm-10"
								placeholder="Username" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span class="help-block " id="usernameMsg"></span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">密码</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="password" name="password" id="password"
								class="form-control col-sm-10" placeholder="Password"  />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock" class="help-block ">请输入6位以上字符</span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">确认密码</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="password" name="repassword" class="form-control col-sm-10"
								placeholder="Password Again" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock" class="help-block ">两次密码要输入一致哦</span></p>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-8" style="width: 40%">
							<input type="email" name="email" class="form-control col-sm-10"
								placeholder="Email" />
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock" class="help-block ">填写正确邮箱格式</span></p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">性别</label>
						<div class="col-sm-8" style="width: 40%">
							<label class="radio-inline"> <input type="radio"
								name="gender" value="男" checked="checked"> 男
							</label> <label class="radio-inline"> <input type="radio"
								name="gender" value="女"> 女
							</label>
						</div>
						<div class="col-sm-2">
						<p class="text-danger"><span id="helpBlock" class="help-block ">你是帅哥 还是美女</span></p>
						</div>
					</div>
					<hr>
					<div class="form-group">
						<div class="col-sm-7 col-sm-push-2">
							<input id="registerBtn" type="submit" value="注册" class="btn btn-primary  btn-lg" style="width: 200px;" disabled/> &nbsp; &nbsp;
							<input type="reset" value="重置" class="btn btn-default  btn-lg" style="width: 200px;"  />
						</div>
					</div>
					<div class="text-center" style="color:red">${registerMsg}</div>
				</form>

			</div>
		</div>
	</div>
	
</body>
</html>